<!--  -->
<template>
  <div class="compmenu" v-loading="loading">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="常用组件" name="1">
        <NestingComponentL :componentTypes="commonComponentTypes" />
      </el-tab-pane>
      <el-tab-pane label="表单控件" name="2">
        <NestingFormComponentL ref="nestingformcomponentL" />
      </el-tab-pane>
      <el-tab-pane label="公共组件" name="3">
        <NestingCommonComponentL :commonComponentList="commonComponentList" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import NestingComponentL from '@/components/common/design/dialog/box/NestingComponentL.vue'
import NestingFormComponentL from '@/components/common/design/dialog/box/NestingFormComponentL.vue'
import NestingCommonComponentL from '@/components/common/design/dialog/box/NestingCommonComponentL.vue'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import * as PubsubType from '@/config/pubsubtype.js'
import PubSub from 'pubsub-js'
import storage from '@/core/storage.js'
export default {
  mounted () {
    let componentTypes = storage.getItem('componentTypes')
    if (componentTypes && JSON.parse(componentTypes).length > 0) {
      this.componentTypes = JSON.parse(componentTypes)
      this.loading = false
    } else {
      PubSub.subscribe(PubsubType.PUBSUB_IFRAME_LOADING_OVER, (event, data) => {
        if (this.isFirst) {
          this.componentTypes = BackendjsFunctions.getComponentType()
          storage.setItem('componentTypes', JSON.stringify(this.componentTypes))
          this.commonComponentList = BackendjsFunctions.getCommonComponentList()
          this.isFirst = false
        }
        this.loading = false
      })
    }
    PubSub.subscribe(PubsubType.PUBSUB_IFRAME_LOADING_OVER, (event, data) => {
      this.activeName = '1'
    })
    // PubSub.subscribe(PubsubType.PUBSUB_IFRAME_LOADING_OVER, (event, data) => {
    //   this.componentTypes = BackendjsFunctions.getComponentType()
    //   storage.setItem('componentTypes', JSON.stringify(this.componentTypes))
    //   this.loading = false
    // })
  },
  data () {
    return {
      loading: true,
      activeName: '1',
      isFirst: true,
      // 组件
      componentTypes: [],
      // 公共组件列表数据
      commonComponentList: []
    }
  },
  computed: {
    commonComponentTypes () {
      return this.componentTypes.filter(item => item.cateType === 1 || item.cateType === 2 || item.cateType === 3 || item.cateType === 4)
    }
  },
  methods: {
    // 标签切换触发
    handleClick (tab, event) {
      if (tab.name === '3') {
        this.commonComponentList = BackendjsFunctions.getCommonComponentList()
      }
    }
  },
  components: {
    NestingComponentL,
    NestingFormComponentL,
    NestingCommonComponentL
  }
}

</script>
<style scoped lang="scss">
.compmenu /deep/ .el-tabs__item{
  padding: 0 10px !important;
}
</style>
